<template>
  <div class="homePage-container">
    <!-- 头部组件 -->
    <header-vue></header-vue>
    <!-- 主体最大的盒子 -->
    <div class="big-box">
      <div class="homePage-box">
        <!-- 左边导航栏 -->
        <div class="aside">
          <Aside></Aside>
        </div>
        <!-- 右侧内容主体区域 -->
        <div class="home-main-body">
          <!-- 主体 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderVue from '@/components/common/Header.vue'
import Aside from '@/components/common/Aside.vue'
export default {
  name: 'homePage',
  data() {
    return {}
  },
  components: {
    HeaderVue,
    Aside
  }
}
</script>

<style lang="less" scoped>
.big-box {
  background-color: #f5f6f7;
  // height: 100%;
  .homePage-box {
    width: 1086px;
    margin: 0 auto;
    display: flex;
    .aside {
      width: 190px;
      margin: 50px 20px 0 0;
    }
    .home-main-body {
      width: 876px;
      margin: 50px 0 0 0;
    }
  }
}
</style>
